<template>
  <view class="w-full h-[100vh] relative">
    <web-view :src="webUrl"></web-view>
    <!-- 右下角倒计时 -->
    <cover-view v-if="type == 'time'" class="fixed right-[30rpx] bottom-[80rpx] z-[999]">
      <cover-view class="w-[128rpx] h-[128rpx] rounded-[64rpx] bg-white border-[4rpx] border-solid border-[#4cd964] flex flex-col justify-center items-center shadow-[0_4rpx_12rpx_rgba(0,0,0,0.1)]">
        <cover-view class="text-[32rpx] font-bold color-[#323233] leading-[50rpx] text-center border-b-[1px] border-b-solid border-b-[#e5e5e5]">{{ minutes }}M</cover-view>
        <cover-view class="text-[32rpx] font-bold color-[#323233] leading-[50rpx] text-center">{{ seconds }}S</cover-view>
      </cover-view>
    </cover-view>
  </view>
</template>

<script setup>
import { getEnvBaseUrl } from '@/utils'
import { reportStudy } from '@/api/study.js'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Base64 } from 'js-base64'
import { formatSeconds } from '@/utils'

definePage({
  style: {
    // navigationStyle: 'custom',
    navigationBarTitleText: '文档预览',
  },
})
defineOptions({
  name: 'DocView',
})

// web-view URL
const webUrl = ref('')
const file_id = ref('')  // 学习文件id
const type = ref('')  // 如果为time，则开启倒计时，以及上报学习情况
const progress = ref(0)  // 已学习时长（秒），默认0
const duration = ref(300)  // 要学习的总时长（秒），默认300

// 倒计时（秒）- 剩余时间 = 总时长 - 已学习时长
const totalSeconds = ref(0)
let countdownTimer = null  // 倒计时定时器
let reportTimer = null  // 上报定时器
const accumulatedReadTime = ref(0)  // 累计阅读时长（秒）
const pendingDuration = ref(0)  // 待上报的失败时长

// 倒计时分钟和秒数
const minutes = computed(() => Math.floor(totalSeconds.value / 60))
const seconds = computed(() => totalSeconds.value % 60)

// 接收页面参数
onLoad((options) => {
  file_id.value = options.file_id || ''
  type.value = options.type || ''
  progress.value = parseInt(options.progress || 0)
  duration.value = parseInt(options.duration || 300)
  
  // 计算剩余倒计时时间：总时长 - 已学习时长
  totalSeconds.value = Math.max(0, duration.value - progress.value)
  
  // 如果传入了 url 参数，则使用传入的 url
  if (options.url) {
    webUrl.value = 'https://filepreview.tylin.com.cn/onlinePreview?url=' + encodeURIComponent(Base64.encode(getEnvBaseUrl() + options.url))
  }
})

// 上报阅读进度
const reportReadProgress = async () => {
  // 待上报的时长 = 未上报的累计时间 + 待上报的失败时长
  const durationToReport = Math.round(accumulatedReadTime.value) + pendingDuration.value
  
  if (durationToReport === 0 || !file_id.value) {
    return
  }
  
  const reportData = {
    file_id: file_id.value,
    duration: durationToReport
  }
  
  try {
    const result = await reportStudy(
      reportData,
      {
        hideErrorToast: true,
        showLoading: false
      }
    )
    // 上报成功，清空累计时间和待上报时长
    accumulatedReadTime.value = 0
    pendingDuration.value = 0
  } catch (err) {
    // 上报失败，将当前累计时间累加到待上报时长
    pendingDuration.value += Math.round(accumulatedReadTime.value)
    accumulatedReadTime.value = 0
  }
}

// 启动倒计时和上报定时器
const startTimer = () => {
  // 启动倒计时（每秒减1）
  countdownTimer = setInterval(() => {
    if (totalSeconds.value > 0) {
      totalSeconds.value--
    } else {
      // 倒计时结束
      clearInterval(countdownTimer)
      countdownTimer = null
      clearInterval(reportTimer)
      reportTimer = null
      uni.showToast({
        title: '已达到学习时间',
        icon: 'none',
      })
      // 时间到时，进行最后的上报
      reportReadProgress()
    }
  }, 1000)
  
  // 启动上报定时器（每5秒上报一次）
  reportTimer = setInterval(() => {
    // 每次上报前，累计5秒的阅读时长
    accumulatedReadTime.value += 5
    reportReadProgress()
  }, 5000)
}

onMounted(() => {
  if (type.value == 'time') {
    startTimer()
  }
})

onUnmounted(() => {
  // 清理倒计时定时器
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
  
  // 清理上报定时器
  if (reportTimer) {
    clearInterval(reportTimer)
    reportTimer = null
  }
  
  // 离开页面时进行最后的上报（如果还有未上报的时长）
  if ((accumulatedReadTime.value > 0 || pendingDuration.value > 0) && file_id.value) {
    reportReadProgress()
  }
})
</script>

<style lang="scss" scoped>
</style>
